"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { Plus, Edit, Trash2, ArrowUpDown, UserCheck, UserX } from "lucide-react"

interface User {
  id: string
  username: string
  realName: string
  role: "管理员" | "普通用户" | "审核员"
  department: string
  createTime: string
  lastLoginTime: string
  status: "启用" | "禁用"
}

export default function UserManagement() {
  const [users] = useState<User[]>([
    {
      id: "1",
      username: "admin",
      realName: "管理员",
      role: "管理员",
      department: "系统管理部",
      createTime: "2024-01-01",
      lastLoginTime: "2024-01-22",
      status: "启用",
    },
    {
      id: "2",
      username: "zhangsan",
      realName: "张三",
      role: "普通用户",
      department: "财务部",
      createTime: "2024-01-05",
      lastLoginTime: "2024-01-21",
      status: "启用",
    },
    {
      id: "3",
      username: "lisi",
      realName: "李四",
      role: "审核员",
      department: "市场部",
      createTime: "2024-01-08",
      lastLoginTime: "2024-01-20",
      status: "启用",
    },
    {
      id: "4",
      username: "wangwu",
      realName: "王五",
      role: "普通用户",
      department: "人事部",
      createTime: "2024-01-10",
      lastLoginTime: "2024-01-15",
      status: "禁用",
    },
  ])

  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [editingUser, setEditingUser] = useState<User | null>(null)

  const getRoleColor = (role: string) => {
    switch (role) {
      case "管理员":
        return "bg-red-500"
      case "审核员":
        return "bg-blue-500"
      case "普通用户":
        return "bg-green-500"
      default:
        return "bg-gray-500"
    }
  }

  const getStatusColor = (status: string) => {
    return status === "启用" ? "bg-green-500" : "bg-gray-500"
  }

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedUsers(users.map((user) => user.id))
    } else {
      setSelectedUsers([])
    }
  }

  const handleSelectUser = (id: string, checked: boolean) => {
    if (checked) {
      setSelectedUsers([...selectedUsers, id])
    } else {
      setSelectedUsers(selectedUsers.filter((userId) => userId !== id))
    }
  }

  const handleEdit = (user: User) => {
    setEditingUser(user)
    setIsEditDialogOpen(true)
  }

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">用户管理</h1>
        <div className="flex gap-2">
          {selectedUsers.length > 0 && (
            <>
              <Button variant="outline">
                <UserCheck className="h-4 w-4 mr-2" />
                批量启用
              </Button>
              <Button variant="outline">
                <UserX className="h-4 w-4 mr-2" />
                批量禁用
              </Button>
              <Button variant="outline">
                <Trash2 className="h-4 w-4 mr-2" />
                批量删除
              </Button>
            </>
          )}
          <Button onClick={() => setIsCreateDialogOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            新增用户
          </Button>
        </div>
      </div>

      <div className="border rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox checked={selectedUsers.length === users.length} onCheckedChange={handleSelectAll} />
              </TableHead>
              <TableHead className="cursor-pointer">
                用户名 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                姓名 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>角色</TableHead>
              <TableHead className="cursor-pointer">
                所属部门 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                创建时间 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                最后登录时间 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>状态</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => (
              <TableRow key={user.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedUsers.includes(user.id)}
                    onCheckedChange={(checked) => handleSelectUser(user.id, checked as boolean)}
                  />
                </TableCell>
                <TableCell className="font-medium">{user.username}</TableCell>
                <TableCell>{user.realName}</TableCell>
                <TableCell>
                  <Badge className={`${getRoleColor(user.role)} text-white`}>{user.role}</Badge>
                </TableCell>
                <TableCell>{user.department}</TableCell>
                <TableCell>{user.createTime}</TableCell>
                <TableCell>{user.lastLoginTime}</TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Badge className={`${getStatusColor(user.status)} text-white`}>{user.status}</Badge>
                    <Switch checked={user.status === "启用"} size="sm" />
                  </div>
                </TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => handleEdit(user)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button variant="outline" size="sm">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* 新增用户对话框 */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新增用户</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="username">用户名</Label>
              <Input id="username" placeholder="请输入用户名" />
            </div>
            <div>
              <Label htmlFor="realName">姓名</Label>
              <Input id="realName" placeholder="请输入真实姓名" />
            </div>
            <div>
              <Label htmlFor="password">密码</Label>
              <Input id="password" type="password" placeholder="请输入密码" />
            </div>
            <div>
              <Label htmlFor="role">角色</Label>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="选择角色" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="admin">管理员</SelectItem>
                  <SelectItem value="auditor">审核员</SelectItem>
                  <SelectItem value="user">普通用户</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="department">部门</Label>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="选择部门" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="finance">财务部</SelectItem>
                  <SelectItem value="market">市场部</SelectItem>
                  <SelectItem value="hr">人事部</SelectItem>
                  <SelectItem value="tech">技术部</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
                取消
              </Button>
              <Button>创建</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 编辑用户对话框 */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>编辑用户</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="editUsername">用户名</Label>
              <Input id="editUsername" defaultValue={editingUser?.username} />
            </div>
            <div>
              <Label htmlFor="editRealName">姓名</Label>
              <Input id="editRealName" defaultValue={editingUser?.realName} />
            </div>
            <div>
              <Label htmlFor="editRole">角色</Label>
              <Select defaultValue={editingUser?.role}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="管理员">管理员</SelectItem>
                  <SelectItem value="审核员">审核员</SelectItem>
                  <SelectItem value="普通用户">普通用户</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="editDepartment">部门</Label>
              <Select defaultValue={editingUser?.department}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="财务部">财务部</SelectItem>
                  <SelectItem value="市场部">市场部</SelectItem>
                  <SelectItem value="人事部">人事部</SelectItem>
                  <SelectItem value="技术部">技术部</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
                取消
              </Button>
              <Button>保存</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
